<template>
  <van-nav-bar title="血压" left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="ab">
    <div class="a">
      <div class="l">
        <h1>{{ blooda }}</h1>
        <p>收缩压(mmHg)</p>
      </div>
      <div class="m">
        <h1>{{ bloodb }}</h1>
        <p>舒张压(mmHg)</p>
      </div>
      <div class="r">
        <h1>{{ hearta }}</h1>
        <p>心率(次/分)</p>
      </div>
    </div>
    <div class="ae" v-if="blooda === '' && bloodb === '' && hearta === ''">
      <p>还没有您的血压记录</p>
      <p>通过智能设备上传或者手动上传您的血压数据，看看健康顾问怎么说</p>
    </div>
    <div class="ae" v-else-if="blooda < 90 || bloodb < 60">
      <p>您血压偏低，注意加强保健</p>
      首先需要排除疾病及用药引起的血压偏低，生理性低血压
      注意平时加强营养，坚持锻炼改善血管调节功能。平时需
      注意体位变化动作要慢，避免引发体位性低血压晕厥。
      <p>*以上建议仅供参考，如有不适请及时就医</p>
    </div>
    <div class="ae" v-else-if="90 < blooda < 119 || 60 < bloodb < 79">
      <p>您血压在正常范围，保持很重要</p>
      保持血压在正常范围内调节，是保证身体各脏器工作时的
      能量和氧的供应的基础，生活中注意合理饮食，低盐低 脂，适量运动，保持良好的心态。
      <p>*以上建议仅供参考，如有不适请及时就医</p>
    </div>
    <div class="ae" v-else-if="120 < blooda < 139 || 80 < bloodb < 89">
      <p>您正常血压偏高，需加强监测</p>
      临界血压可以说是高血压的前期，建议您持续关注血压变
      化，最好每周测量一次血压，日常生活中做到低盐饮食
      戒烟限酒、体重控制在正常范围内，保持良好的心态和睡 眠，避免或延缓高血压的发生。
      <p>*以上建议仅供参考，如有不适请及时就医</p>
    </div>
    <div class="ae" v-else-if="140 < blooda < 159 || 90 < bloodb < 99">
      <p>您血压轻度高，心脑血管伤害大</p>
      血压轻度高您可能没有任何症状，但是千万不能忽视，
      高血压最大、最直接的伤害就是血管，会导致血管硬化,
      形成动脉斑块，造成血管狭窄，甚至破裂出血，建议您持
      续关注血压变化，低盐低脂饮食，保持良好的心情和睡 眠，若血压长期不能达标就需要服用降压药。
      <p>*以上建议仅供参考，如有不适请及时就医</p>
    </div>
    <div class="ae" v-else-if="160 < blooda < 179 || 100 < bloodb < 109">
      <p>您血压中度高，易发生心脑血管意外</p>
      血压比较高，避免情绪激动，保证充足的睡眠，遵医嘱服
      用降压药，持续关注血压变化，如果一直居高不下，一定 要及时医院就诊治疗。
      <p>*以上建议仅供参考，如有不适请及时就医</p>
    </div>
    <div class="ae" v-else>
      <p>您血压重度高，非常危险</p>
      高压一旦超过180或低压超过110，本身就会使心脑血管超
      负荷，极易引发心脑血管意外，要避免情绪激动，立即休
      息，禁止一切运动，以免血压进一步飙升，非常的危险!
      <p>*以上建议仅供参考，如有不适请及时就医</p>
    </div>
  </div>
  <div class="af">
    <h4>近7次记录</h4>
    <div ref="main" style="width: 100%; height: 400px"></div>
    <div class="ae">
      对于初次诊断、治疗早期，或者经过治疗但血压尚不达标的患者，应在下次就诊前连续测量5～7天，而在血压控制良好时，每周也至少应测量1天。
    </div>
    <button
      style="
        width: 100%;
        background: greenyellow;
        color: antiquewhite;
        border: none;
        height: 60px;
        text-align: center;
        margin-top: 40px;
      "
    >
      手动录入
    </button>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
const router = useRouter()
// 图表容器DOM元素
const main = ref<HTMLDivElement>()
const blooda = ref<number>(0)
const bloodb = ref<number>(0)
const hearta = ref<number>(0)
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(main.value)
  // 指定图表的配置项和数据
  const option = {
    // 标题组件
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
})
const onClickLeft = () => {
  router.go(-1)
}
</script>
<style>
template {
  height: 100%;
  background: whitesmoke !important;
  overflow: hidden;
}
.ab {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 200px;
  padding: 10px;
  text-align: center;
  background: white;
  margin-top: 10px;
  .ae {
    width: 100%;
    height: 120px;
    background: whitesmoke !important;
    margin-top: 20px;
    text-align: left;
    line-height: 20px;
  }
  .l {
    width: 33%;
    height: 100%;
    text-align: center;
    float: left;
  }
  .m {
    width: 34%;
    height: 100%;
    text-align: center;
    float: left;
  }
  .r {
    width: 33%;
    height: 100%;
    text-align: center;
    float: right;
  }
}
.af {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 500px;
  padding: 10px;
  text-align: center;
  background: white;
  margin-top: 30px;
}
</style>
